﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Admin.Master" Inherits="System.Web.Mvc.ViewPage<OGS.Web.Models.Admin.SiteImagesListModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <%= OGS.Utility.Helper.GetPageTitle("Site Image List") %>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <ol class="breadcrumb">
                    <li><a href="/admin/manage-dashboard">Home</a></li>
                    <li class="active">Site Image List</li>
                </ol>
            </div>
            <div class="col-xs-12">
                <div class="well well-White">
                    <div class="bs-example form-horizontal">
                        <div class="form-group">
                            <div class="col-xs-8">
                                <%: Html.TextBoxFor(m => m.Name, new { @class = "form-control", @maxlength = "100", PlaceHolder = "Type to search image" })%>
                            </div>
                            <a class="btn btn-primary btnSearch">Search</a>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <h3>Images</h3>
                        </div>
                        <% foreach (var image in Model.SiteImage)
                           {
                        %>

                        <div class="col-xs-6 col-lg-2 col-md-2 col-sm-3 imgContainer" style="padding: 0 0 0 0;">
                            <div style="margin: 15px; border: solid 1px #C1C1C1; border-radius: 3px; height: 94%">
                                <img class="SiteImage img-responsive center-block" src="<%= image.Path %>" alt="" style="position: relative;" />
                                <div class="tooltip" style="bottom: 0px; width: 100%">
                                    <div class="tooltip-inner">
                                        <%= image.Path %>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <% } %>
                    </div>

                </div>
            </div>
        </div>
    </section>


    <script type="text/javascript">
        function SetGalleryStyle() {
            $(".imgContainer").height($(".imgContainer").width());
            $(".tooltip-inner").width($(".imgContainer").width() - 46);
            $(".SiteImage").each(function () {
                $(this).css("top", ($(this).parent().height() - $(this).height()) / 2);
            });
        }

        $(document).ready(function () {
            $(".SiteImage").css("maxHeight", "100%");
            SetGalleryStyle();
            $(".tooltip").css("opacity", 1);

            $(".btnSearch").click(function () {
                var name = $.trim($("#Name").val());
                if (name != "") {
                    location.href = "/admin/siteimage-list/?name=" + $("#Name").val();
                } else {
                    location.href = "/admin/siteimage-list/";
                }
            });

            $("#Name").keypress(function (e) {
                if (e.which == '13') {
                    e.preventDefault();
                    $(".btnSearch").click();
                }
            });

        });

        $(window).resize(function () {
            SetGalleryStyle();
        });
    </script>
</asp:Content>
